<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  <title>新华炫闻</title>
  <style>
  body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin: 0; padding: 0;}
  body,button,input,select,textarea {font:12px/1.4 Arial,Helvetica,'Hiragino Sans GB','Microsoft YaHei',sans-serif;color:#333}
  h1,h2,h3,h4,h5,h6 {font-size: 100%;}
  ul,ol {list-style: none;}
  table {border-collapse: collapse; border-spacing:0}
   img {border:0}
  .left{float:left;}
  .right{float:right;}
  .clearfix:after {content: '\20';display: block;height: 0;clear: both; }
  .clearfix {*zoom: 1;}

html{background-color:#f4f4f4;font-size:10px;font-family:Microsoft YaHei}
.header {border-bottom:1px #999 solid;overflow:hidden;position:Relative;margin:0 1.15rem 1.769rem;    height: 3.846rem;}
.header .logoPIc{float:left;width:13.2rem;display:block;margin-top:1.128rem;margin-bottom:0.448rem}

.category{margin-left:1.153rem;overflow:hidden;}
.category .item{width:11.282rem;float:left;height:7.948rem;margin-right:0.666rem;overflow:hidden;margin-bottom:0.666rem;position:relative}
.category .item .shadow{background-color:#dad9d9;width:100%;height:100%;margin-top:0.256rem;margin-left:0.256rem}
.category .item img{position:absolute;border:0.128rem transparent solid;width:11.026rem;height:7.692rem;display:block;top:0;left:0}

.category .item .title{position:absolute;bottom:0.128rem;left:0.128rem;right:0.128rem;;height:2.153rem;background-image: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8));background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8));  }
.category .item .title h2{font-size:1rem;color:#fff;text-align:right;line-height:2.153rem;padding-right:0.5rem;font-weight:normal;}

.category .item.current .shadow{background-color:#00aaec}
.category .item.current img{border-color:#00aaec}
.category_logo{position:absolute;top:1.128rem;left:0;width:6.025rem;height:2.307rem;background-color:#00aaec;color:#fff;font-size:1.282rem;text-align:right;padding-right:0.641rem;line-height:2.307rem;}

.news{margin-left:1.153rem;overflow:hidden;}
.news .item{float:left;height:4.871rem;width:11.153rem;margin-right:0.41rem;margin-bottom:0.41rem;position:relative;border:0.128rem #cdcdcd solid;overflow:hidden;}
.news .item.current{border-color:#00aaec}
.news .item img{display:block;width:10.769rem;height:5.512rem;margin:0.128rem auto}
.news .item h3{font-size:0.87rem;margin: 0 0.256rem 0.23rem 0.256rem;font-weight:normal;}
.news .item h4{font-size:0.615rem;color:#888;font-weight:normal;margin:0 0.256rem 0.23rem 0.256rem;}
.news .item h5{font-size:0.615rem;color:#333;font-weight:normal;margin:0 0.256rem 0.23rem 0.256rem}


.page{position:absolute;left:50%;top:23.37rem;-webkit-transform: translateX(-50%);transform: translateX(-50%);height:1.538rem;padding:0.2rem;border:0.128rem transparent solid;border-radius:0.769rem}
.page.current{border-color:#00aaec;}

.page .btn{float:left;width:1.538rem;height:1.538rem;background:url(images/arrow.png) no-repeat;background-size:6.152rem 1.538rem;margin:0 0.769rem}
#prevBtn{background-position:0 0}
#prevBtn.current{background-position:-1.538rem 0}
#nextBtn{background-position:-3.076rem 0}
#nextBtn.current{background-position:-4.614rem 0}

#curPageNo{float:left;height:1.538rem;line-height:1.538rem;font-size:1rem;color:#00aaec}

.article_title{margin-top:1.153rem;font-size:1.282rem;height:2.307rem;border-left:1.153rem #00aaec solid;padding-left:0.794rem;line-height:2.307rem;overflow:hidden;}
.article_info{margin-left:1.923rem;font-size:0.615rem;color:#888;overflow:hidden;line-height:1.5rem}
.article_content{margin-left:1.153rem;font-size:0.82rem;height:16.666rem;overflow:auto;margin-right:1.153rem;margin-top:1.153rem}
.article_content p{margin: 0 0 1.153rem;}
.article_content .block{width:78%;margin:0 auto}
.article_content .block img{display:block;width:100%}

.loading{position:absolute;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,0.5);display:none;}
.loading img{position:absolute;left:50%;top:50%;width:4rem;height:4rem;margin-left:-2rem;margin-top:-2rem}


  </style>
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/jquery.tmpl.min.js"></script>
  <script src="js/director.js"></script>
 </head>
 <body>
<script id="newsListTmpl" type="text/x-jquery-tmpl">
    <div class="item" newsid="${newsId}">
			<h3>${title}</h3>
			<h4>${showSource}  ${datestr}</h4>
		</div>
</script>

 <div class="header" id="header"><img id="logoPIc" class="logoPIc" src="images/logo.png"></div>


 <div class="category" id="category">
		<div class="item"  catid="27" catname="头条">
			<div class="shadow"></div>
			<img src="http://static.xhw.feedss.com/uploadfile/letv/images/860_600_1.jpg">
			<div class="title"><h2>头条</h2></div>
		</div>

		<div class="item" catid="34" catname="奥运">
			<div class="shadow"></div>
			<img src="http://static.xhw.feedss.com/uploadfile/letv/images/860_600_2.jpg">
			<div class="title"><h2>奥运</h2></div>
		</div>

		<div class="item" catid="64" catname="国际">
			<div class="shadow"></div>
			<img src="http://static.xhw.feedss.com/uploadfile/letv/images/860_600_3.jpg">
			<div class="title"><h2>国际</h2></div>
		</div>

		<div class="item" catid="48" catname="思客">
			<div class="shadow"></div>
			<img src="http://static.xhw.feedss.com/uploadfile/letv/images/860_600_4.jpg">
			<div class="title"><h2>思客</h2></div>
		</div>
			<div class="item" catid="29" catname="财经">
			<div class="shadow"></div>
			<img src="http://static.xhw.feedss.com/uploadfile/letv/images/860_600_5.jpg">
			<div class="title"><h2>财经</h2></div>
		</div>

		<div class="item" catid="32" catname="社会">
			<div class="shadow"></div>
			<img src="http://static.xhw.feedss.com/uploadfile/letv/images/860_600_6.jpg">
			<div class="title"><h2>社会</h2></div>
		</div>

		<div class="item" catid="30" catname="娱乐">
			<div class="shadow"></div>
			<img src="http://static.xhw.feedss.com/uploadfile/letv/images/860_600_7.jpg">
			<div class="title"><h2>娱乐</h2></div>
		</div>

		<div class="item" catid="40" catname="房产">
			<div class="shadow"></div>
			<img src="http://static.xhw.feedss.com/uploadfile/letv/images/860_600_8.jpg">
			<div class="title"><h2>房产</h2></div>
		</div>

 </div>


 <div class="category_logo" id="category_logo">loading..</div>


 <div class="news" id="news">loading...</div>

<div class="page" id="page">
<div class="btn" id="prevBtn"></div>
<div id="curPageNo"></div>
<div class="btn" id="nextBtn"></div>
</div>


<div class="article_title" id="article_title">loading...</div>
 <div class="article_info" id="article_info">loading...</div>
  <div class="article_content" id="article_content">

  <div class="block">
  loading...
</div>


</div>

<div class="loading" id="loading">
<img src="images/ajax-loader.gif" class="loadingGif">
</div>

<script>
var $locked= 0;
var $hash="/home";
var $currCatname = "";
var $currCatid = 0;
var $currPageNo = 0;
var $isPage= 0;
var $index= 0;
var  route = {
	"/home":showHome,
	 "/category":showCate,
	 "/detail":showDetail
};
	var router = Router(route);
	router.init();
    function hideAllPages(){
		$("#article_title").hide();
		$("#article_info").hide();
		$("#article_content").hide();
		$("#page").hide();
		$("#news").hide();
		$("#category_logo").hide();
		$("#category").hide();
		$("#header").hide();
		$("#logoPIc").hide();
	}
	function showHome(){
		$hash="/home";
		hideAllPages();
		$("#category").show();
		$("#header").show();
		$("#logoPIc").show();
	}
	function showCate(){
		$hash="/category";
		hideAllPages();
		$("#news").show();
		$("#category_logo").show();
		$("#header").show();
		$("#page").show();
	}
	function showDetail(){
		$hash="/detail";
	    hideAllPages();
		$("#article_title").show();
		$("#article_info").show();
		$("#article_content").show();
		$(document).keydown(function (event) {
			if($hash == '/detail'){
				var article_block = $('#article_content');
				switch(event.keyCode){
					case 40://down
					article_block.animate({scrollTop: article_block.scrollTop() + 200});
					break;
				case 38://up
					article_block.animate({scrollTop: article_block.scrollTop() - 200});
					break;
				}

			}
		} )

		if($hash == '/detail'){
			var article_block = $('#article_content .block');
			article_block.animate({scrollTop: article_block.scrollTop() - 200});
		}
	}
if(location.hash== ""){
	 showHome();
     history.replaceState(null, "index", location+"#"+$hash);
 }

$.ajaxSetup({
   beforeSend:showLoading,
   complete:hideLoading
});


function showLoading(){
    $("#loading").show();
	$locked = 1;
}

function hideLoading(){
    $("#loading").hide();
	$locked = 0;
}

function loadNewsList(catid,name,page){//拉取新闻列表
	var page= page || 1;
	$currCatname = name;
	$currCatid = catid;
	$currPageNo = page;
      $.ajax({
		  type:"GET",
		  url:"http://letv.qnsaas.cn/letv/jc",
		  data:{"catid":catid,"name":name,"page":page},
		  success:function(data){
			  $("#category_logo").html( data.catname);
		      $("#news").html(  $("#newsListTmpl").tmpl(data.data)  );
			  $index= 0;
			  $("#curPageNo").text($currPageNo);
			 // $("#news .item").removeClass("current").eq($index).addClass("current");
		  },
		  error:function(){
		  },
		  jsonpCallback:"jcategory",
		  dataType:"jsonp"
	  });
}

function loadNewsDetial(newsid){//拉取文章内容
    $.ajax({
		  type:"GET",
		  url:"http://letv.qnsaas.cn/letv/jd",
		  data:{"newsid":newsid},
		  success:function(data){
			   $("#article_title").html( data.data.title);
			   $("#article_info").html( data.data.source+" "+data.data.datestr);
			   $("#article_content .block").eq(0).html( data.data.mcontent );
		  },
		  error:function(){
		  },
		  jsonpCallback:"jdetail",
		  dataType:"jsonp"
	  });

}

 $("#category .item").removeClass("current").eq(0).addClass("current");

function keyDownHandler(e){
	if($locked) return;
    var elements= null;
	var length= 0;
	var cols = 4;
	if(	$hash=="/home"){
	    elements =$("#category .item");
	    length= elements.length;
	}else if(	$hash=="/category"){
	    elements =$("#news .item");
		length= elements.length;
	}else{
	   return false;
	}

	function switchPage(i){
		    var id,name="";
			if($hash== "/home"){
			    id= elements.eq(i).attr("catid");
				name= elements.eq(i).attr("catname");
				location.hash= "/category";
				loadNewsList(id,name);
			}else if($hash== "/category"){
			    id= elements.eq(i).attr("newsid");
				location.hash= "/detail";
				loadNewsDetial(id);
			}else{
			
			}
	}

	function setFocus(i){
			 elements.removeClass("current").eq(i).addClass("current");
	}
	function clearFocus(){
			 elements.removeClass("current")
	}

  switch(e.keyCode){
    case 39:   //right
	if($hash== "/category" && $isPage){
	        $("#nextBtn").addClass("current");
  	        $currPageNo++;
			loadNewsList($currCatid,$currCatname, $currPageNo)
	}else{
			if($index< length -1) $index++;
			setFocus($index)
	}
	break;

	case 37:   //left
	if($hash== "/category" && $isPage){
	        $("#prevBtn").addClass("current");
  	        $currPageNo--;
			loadNewsList($currCatid,$currCatname, $currPageNo)
	}else{
			if($index > 0) $index--;
			setFocus($index)
	}
	break;

	case 40:   //down
	 if( $index+cols < length) {
			$index+= cols;
			setFocus($index)
		}else{
			if($hash== "/category"){
				 $("#page").addClass("current");
             	 clearFocus();
				 $isPage= 1;
			}
		}

	break;

	case 38:   //up
	 if($hash== "/category" && $isPage == 1){
		   $("#page").removeClass("current");
	       $isPage= 0 ;
	  }else{
			if( $index- cols >= 0) {
				$index -= cols;
			}  
	  }
	 setFocus($index);


	break;
	case 13://enter
    switchPage($index);
	break;
  
  }

}

$(document).keydown(keyDownHandler);
$(document).keyup(function(e){
     $("#page .btn").removeClass("current");
});

;(function (doc, win) {
	var docEl = doc.documentElement,
	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	recalc = function () {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			docEl.style.fontSize = 78 * (clientWidth / 3840 ) + 'px';
	};

	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
 </body>
</html>
